いや、ちまちま作っている。
紹介
以下でインストールし、
yarn add -D docz-theme-figma設定のthemeで指定すると使えます。
module.exports = {
theme: 'docz-theme-figma',
};ちまちま作っている訳
最近はもう Atomic Design を取り入れて開発をすることがほとんどですが、まだ自分の設計が未熟なのか、進むにつれマイナーな要素が乱立してカオスになってしまいます。そしてその状態で一定期間触らないでいると、もはや忘れてしまい、その都度再定義してしまったほうが早いということで Page 層用のファイルへ Atom 層の定義を書いてしまっていたりします。
何故そのようになってしまったか考えると、デザインの整理が100％できてません。そのデザインはデザイナーさんから来た想定です。
例えば、トップページにあるボタン要素だけを見て実装してしまい、あとで別のページの少し違うボタンの色々を見て、うまく細分化できず様々な一部だけが違う似たような要素が乱立（別にこれは悪くはない）したりします。
またデザイン上ではAと定義されているが、よく見ると新しいhogeに依存のfooコンポーネントが入れ子になっていて急遽それに合わせて CSS を修正するといった具合です。これにはclass属性などを使うかもしれません。
ですがこんな感じで管理していると、さらにその後にくる急な仕様・デザイン修正が来た時に徐々に崩壊していきます。（僕の今いる会社の問題ですがまず担当プロジェクトが多いという前提がありますが、、）各プロジェクトの１コンポーネントの取りうるclass名など覚えていない。乱立した似ているコンポーネントのどこが違うのか目で見てみるまで分からない（見るから無ければ無いと判断）。みたいな具合です。
なので、そうならないように実装前にこれから実装することになる要素について予習みたいなことをするようになり、それを Figma というツールを取り入れて行うようになりました。
Figma とはざっくり言うと
みたいなツールで、四角や丸を置いたり、それらをシンボル化して使い回したり、ベジェで線を書いたりテキストを何か書いたりできるツールです。また、 XD のようなプロトタイピング機能も備えています。
Figma は Web でもアプリでもすぐ見れます。プロジェクトのディレクトリに移動して Docz やその他似たような要素管理なツールの開発サーバーを建てたあとlocalhostにアクセスして確認したり、そのコンポーネントが使われているページへアクセスして確認するというフローから入るよりかなりマシです。また環境構築の手間もいらなく、むしろ CSS を考えながら GUI でオブジェクトを弄るだけでなのでエンジニアとしても楽です。
もちろん一覧できたとしてもそれはコードとしては使えませんが、あくまで実装するものの頭の整理が目的なのでいいです。これにより明らかにおかしい部分についても、ほぼ実装前にデザイナーさんとの間で解決した上で実装に入れるようになります。
考えがまとまったらやっと Docz などを使い要素をコード化したものを管理していきます。ここで正直docz-theme-defaultという標準テーマでも全然大丈夫なのですが、どうせなら Figma と同じ見た目（同じサイドバーの構成）とかだと受け入れてもらいやすいかなという考えに至ったので作ったという訳です。
Figma 使いましょう。
